:root {
  --field-decorator-text-color: #555;
  --field-decorator-error-color: var(--color-danger);
  --field-decorator-blur-color: #888;
  --field-decorator-focus-color: var(--color-primary);
  --field-decorator-placeholder-size: 16px;
  --field-decorator-icon-size: 20px;
  --field-decorator-line-size: 1px;
  --field-decorator-line-focus-size: 2px;
  --field-decorator-line-border-radius: 4px;
  --field-decorator-disabled-color: var(--color-text-disabled);
  --field-decorator-standard-normal-margin-top: 22px;
  --field-decorator-standard-normal-margin-bottom: 4px;
  --field-decorator-standard-normal-icon-margin-top: 22px;
  --field-decorator-standard-normal-icon-margin-bottom: 4px;
  --field-decorator-standard-normal-non-hint-margin-top: 4px;
  --field-decorator-standard-small-margin-top: 18px;
  --field-decorator-standard-small-margin-bottom: 4px;
  --field-decorator-standard-small-icon-margin-top: 18px;
  --field-decorator-standard-small-icon-margin-bottom: 4px;
  --field-decorator-standard-small-non-hint-margin-top: 2px;
  --field-decorator-outlined-normal-margin-top: 16px;
  --field-decorator-outlined-normal-margin-bottom: 16px;
  --field-decorator-outlined-normal-padding-left: 16px;
  --field-decorator-outlined-normal-padding-right: 16px;
  --field-decorator-outlined-normal-placeholder-space: 4px;
  --field-decorator-outlined-normal-icon-margin-top: 16px;
  --field-decorator-outlined-normal-icon-margin-bottom: 16px;
  --field-decorator-outlined-small-margin-top: 8px;
  --field-decorator-outlined-small-margin-bottom: 8px;
  --field-decorator-outlined-small-padding-left: 12px;
  --field-decorator-outlined-small-padding-right: 12px;
  --field-decorator-outlined-small-placeholder-space: 2px;
  --field-decorator-outlined-small-icon-margin-top: 8px;
  --field-decorator-outlined-small-icon-margin-bottom: 8px;
}

.var-field-decorator {
  position: relative;
  width: 100%;
  color: var(--field-decorator-text-color);

  &__controller {
    width: 100%;
    display: flex;
    align-items: stretch;
    position: relative;
  }

  &__middle {
    position: relative;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__icon {
    display: flex;
    align-items: center;
    font-size: var(--field-decorator-icon-size);

    .var-icon {
      font-size: var(--field-decorator-icon-size);
    }
  }

  &__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    max-width: var(--field-decorator-middle-offset-width);
    font-size: var(--field-decorator-placeholder-size);
    line-height: 1.5em;
    color: var(--field-decorator-placeholder-color, var(--field-decorator-blur-color));
    pointer-events: none;
    cursor: inherit;
    transform-origin: left;
    transition: transform 0.28s var(--cubic-bezier), color 0.25s, max-width 0.2s;
  }

  &__clear-icon[var-field-decorator-cover] {
    font-size: var(--field-decorator-icon-size);
    margin-left: 6px;
    cursor: pointer;
  }

  &__placeholder-text {
    max-width: calc(
      133% - var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-padding-right)
    );
    position: absolute;
    z-index: -1000;
    top: -1000px;
    display: inline-block;
    pointer-events: none;
    opacity: 0;
    font-size: var(--field-decorator-placeholder-size);
  }

  &__placeholder-text--small {
    max-width: calc(
      133% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right)
    );
  }

  &--placeholder-hidden {
    visibility: hidden;
  }

  &--focus {
    color: var(--field-decorator-focus-color);
  }

  &--disabled {
    color: var(--field-decorator-disabled-color);
    cursor: not-allowed;
  }

  &--error {
    color: var(--field-decorator-error-color);
  }

  &--standard {
    .var-field-decorator__middle {
      margin-top: var(--field-decorator-standard-normal-margin-top);
      margin-bottom: var(--field-decorator-standard-normal-margin-bottom);
    }

    .var-field-decorator__icon {
      margin-top: var(--field-decorator-standard-normal-icon-margin-top);
      margin-bottom: var(--field-decorator-standard-normal-icon-margin-bottom);
    }

    .var-field-decorator__placeholder {
      transform: translate(
        var(--field-decorator-middle-offset-left),
        var(--field-decorator-standard-normal-margin-top)
      );
    }

    .var-field-decorator--placeholder-hint {
      max-width: 133%;
      transform: translate(0, 0) scale(0.75) !important;
    }

    .var-field-decorator__line {
      width: 100%;
      height: var(--field-decorator-line-size);
      background: var(--field-decorator-blur-color);
      transition: background-color 0.25s;
    }

    .var-field-decorator--line-disabled {
      background: var(--field-decorator-disabled-color);
    }

    .var-field-decorator__dot {
      width: 100%;
      height: var(--field-decorator-line-focus-size);
      background: var(--field-decorator-focus-color);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;
    }

    .var-field-decorator--middle-non-hint {
      margin-top: var(--field-decorator-standard-normal-non-hint-margin-top);
    }

    .var-field-decorator--icon-non-hint {
      margin-top: var(--field-decorator-standard-normal-non-hint-margin-top);
    }

    .var-field-decorator--hint-center {
      transform: translate(
        var(--field-decorator-middle-offset-left),
        calc(var(--field-decorator-standard-normal-margin-top) + var(--field-decorator-middle-offset-height) / 2 - 50%)
      );
    }

    .var-field-decorator--line-focus {
      transform: scaleX(1);
    }

    .var-field-decorator--line-error {
      background: var(--field-decorator-error-color);
    }
  }

  &--outlined {
    .var-field-decorator__controller {
      padding: 0 var(--field-decorator-outlined-normal-padding-right) 0
        var(--field-decorator-outlined-normal-padding-left);
    }

    .var-field-decorator__middle {
      margin-top: var(--field-decorator-outlined-normal-margin-top);
      margin-bottom: var(--field-decorator-outlined-normal-margin-bottom);
    }

    .var-field-decorator__icon {
      margin-top: var(--field-decorator-outlined-normal-icon-margin-top);
      margin-bottom: var(--field-decorator-outlined-normal-icon-margin-bottom);
    }

    .var-field-decorator__placeholder {
      transform: translate(
        var(--field-decorator-middle-offset-left),
        var(--field-decorator-outlined-normal-margin-top)
      );
    }

    .var-field-decorator--hint-center {
      transform: translate(
        var(--field-decorator-middle-offset-left),
        calc(var(--field-decorator-outlined-normal-margin-top) + var(--field-decorator-middle-offset-height) / 2 - 50%)
      );
    }

    .var-field-decorator--placeholder-hint {
      max-width: calc(
        133% - var(--field-decorator-outlined-normal-padding-left) -
          var(--field-decorator-outlined-normal-padding-right)
      );
      transform: translate(calc(var(--field-decorator-outlined-normal-padding-left)), -50%) scale(0.75);
    }

    .var-field-decorator__line {
      // for fieldset
      min-width: 0;
      width: 100%;
      height: calc(100% + (var(--field-decorator-placeholder-size) * 0.75 / 2));
      position: absolute;
      top: calc(var(--field-decorator-placeholder-size) * 0.75 / 2 * -1);
      left: 0;
      pointer-events: none;
      border-radius: var(--field-decorator-line-border-radius);
      border: var(--field-decorator-line-size) solid var(--field-decorator-blur-color);
      overflow: hidden;
      padding: 0
        calc(
          var(--field-decorator-outlined-normal-padding-right) -
            var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)
        )
        0
        calc(
          var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) -
            var(--field-decorator-line-size)
        );
      margin: 0;

      &-legend {
        max-width: 0;
        height: calc(var(--field-decorator-placeholder-size) * 0.75);
        visibility: hidden;
        padding: 0;
        overflow: hidden;
        display: block;
        white-space: nowrap;
      }

      &-legend--hint {
        max-width: 100%;
      }
    }

    .var-field-decorator--line-focus {
      border-width: var(--field-decorator-line-focus-size);
      border-color: var(--field-decorator-focus-color);
      padding: 0
        calc(
          var(--field-decorator-outlined-normal-padding-right) -
            var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size)
        )
        0
        calc(
          var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) -
            var(--field-decorator-line-focus-size)
        );
    }

    .var-field-decorator--line-disabled {
      border-radius: var(--field-decorator-line-border-radius);
      border: var(--field-decorator-line-size) solid var(--field-decorator-disabled-color);
    }

    .var-field-decorator--line-error {
      border-color: var(--field-decorator-error-color) !important;
    }
  }

  &--small {
    .var-field-decorator--standard& {
      .var-field-decorator__middle {
        margin-top: var(--field-decorator-standard-small-margin-top);
        margin-bottom: var(--field-decorator-standard-small-margin-bottom);
      }

      .var-field-decorator__placeholder {
        transform: translate(
          var(--field-decorator-middle-offset-left),
          var(--field-decorator-standard-small-margin-top)
        );
      }

      .var-field-decorator--middle-non-hint {
        margin-top: var(--field-decorator-standard-small-non-hint-margin-top);
      }

      .var-field-decorator--icon-non-hint {
        margin-top: var(--field-decorator-standard-small-non-hint-margin-top);
      }

      .var-field-decorator--hint-center {
        transform: translate(
          var(--field-decorator-middle-offset-left),
          calc(var(--field-decorator-standard-small-margin-top) + var(--field-decorator-middle-offset-height) / 2 - 50%)
        );
      }
    }

    .var-field-decorator--outlined& {
      .var-field-decorator__controller {
        padding: 0 var(--field-decorator-outlined-small-padding-right) 0
          var(--field-decorator-outlined-small-padding-left);
      }

      .var-field-decorator__middle {
        margin-top: var(--field-decorator-outlined-small-margin-top);
        margin-bottom: var(--field-decorator-outlined-small-margin-bottom);
      }

      .var-field-decorator__icon {
        margin-top: var(--field-decorator-outlined-small-icon-margin-top);
        margin-bottom: var(--field-decorator-outlined-small-icon-margin-bottom);
      }

      .var-field-decorator__placeholder {
        transform: translate(
          var(--field-decorator-middle-offset-left),
          var(--field-decorator-outlined-small-margin-top)
        );
      }

      .var-field-decorator--hint-center {
        transform: translate(
          var(--field-decorator-middle-offset-left),
          calc(var(--field-decorator-outlined-small-margin-top) + var(--field-decorator-middle-offset-height) / 2 - 50%)
        );
      }

      .var-field-decorator--placeholder-hint {
        max-width: calc(
          133% - var(--field-decorator-outlined-small-padding-left) -
            var(--field-decorator-outlined-small-padding-right)
        );
        transform: translate(calc(var(--field-decorator-outlined-small-padding-left)), -50%) scale(0.75);
      }

      .var-field-decorator__line {
        padding: 0
          calc(
            var(--field-decorator-outlined-small-padding-right) -
              var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size)
          )
          0
          calc(
            var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) -
              var(--field-decorator-line-size)
          );
      }

      .var-field-decorator--line-focus {
        padding: 0
          calc(
            var(--field-decorator-outlined-small-padding-right) -
              var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size)
          )
          0
          calc(
            var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) -
              var(--field-decorator-line-focus-size)
          );
      }
    }
  }

  &--transition-disabled {
    transition: none;
  }
}
